import elementResizeDetectorMaker from 'element-resize-detector'
import debounce from 'lodash.debounce'
export default {
  data () {
    return {
      $_resizeElm: null,
      $_resizeHandler: null
    }
  },
  mounted () {
    this.$_resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
    }, 100)
    setTimeout(() => {
      this.$_initResizeEvent()
    }, 3000)
  },
  beforeDestroy () {
    this.$_destroyResizeEvent()
  },
  methods: {
    $_initResizeEvent () {
      // 初始化element-resize-detector组件
      this.$_resizeElm = elementResizeDetectorMaker()
      this.$_resizeElm && this.$_resizeElm.listenTo(this.$el, this.$_resizeHandler)
    },
    $_destroyResizeEvent () {
      const that = this
      this.$_resizeElm && this.$_resizeElm.removeListener(this.$el, function (element) {
        that.$_resizeElm = null
        that.$_resizeHandler = null
      })
    }
  }
}
